<template>
  <!--执行页 快捷键 -->
  <section class="component collection-hotkey">
    <!-- 按钮区域 -->
    <el-row :key="index" v-for="(item, index) in buttonLists">
      <component
        :is="item.name"
        :carFrameNo="carFrameNo"
        :topInfo="topInfo"
      ></component>
    </el-row>
  </section>
</template>
<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
import { State, namespace } from "vuex-class";
import { componentsButton, buttonList } from "./collection-hotkeys-button";
const CollectionExecutionModule = namespace("collection-execution");
import { Prop } from "vue-property-decorator";

@Component({
  components: {
    ...componentsButton
  }
})
export default class CollectionHotkey extends Vue {
  @CollectionExecutionModule.State private menuChannel;
  @Prop() private carFrameNo;
  @Prop() private topInfo;
  private showHotKey: boolean = false;
  private get buttonLists() {
    return buttonList.filter(
      v => !v.auth.length || v.auth.includes(this.menuChannel)
    );
  }
}
</script>

<style lang="less" scoped>
.component.collection-hotkey {
  // border: 1px solid #dee1e5;
  // background-color: #ffffff;
  display: flex;
  flex-wrap: wrap;
}
</style>
